<template>
    <div>
        <h4>vuex</h4>
        <p>采用集中式存储管理应用中需要在多组件的间进行数据取值和赋值共享状态控制的工具</p>
        <ul>
            <li>1、安装vuex模块 npm install vuex@next --save</li>
            <li>2、在src目录下创建store/index.js文件存储 vuex仓库的定义代码</li>
            <li>3、加载vuex模块，基于createStore方法创建共享仓库对象</li>
            <li>4、在main.js引导文件中进行构建对象的安装操作</li>
        </ul>
        <pre>
        app.use(store) 完成vuex仓库功能的加载时，install 提供了全局共享属性$store的集成
            +  app.config.globalProperties.$store = this【this为vuex构建的仓库对象】;
                ==> vuex 共享的数据被存储于  $store.state 对象中
        
        vuex 不建议直接对 $store.state 中变量进行修改;
        </pre>
        <p>vuex的数据展示</p>
        <!-- <p>{{ $store.state }}</p> -->
        <p>{{ $store.state.msg }} => <input v-model="$store.state.msg" type="text" /> </p>
        <p>{{ $store.state.num }} => <input type="button" value="num重新赋值" @click="setNum()"> </p>
        <p>{{ $store.state.arr }} => <input type="button" value="异步数据加载（计时器模拟）" @click="loadArr()"> </p>
        <p>{{ $store.state.user }}</p>

        <div class="box">
            <VuexChildOne></VuexChildOne>
            <hr>
            <VuexChildTwo></VuexChildTwo>
        </div>
    </div>
</template>

<script>
import VuexChildOne from "@/components/Vuex/VuexChildOne.vue";
import VuexChildTwo from "@/components/Vuex/VuexChildTwo.vue";

export default {
    components:{
        VuexChildOne,VuexChildTwo
    },
    methods: {
        setNum() {
            // this.$store.state.num = Math.random();
            console.log(this.$store)
            this.$store.commit("setNum",Math.random());
        },
        loadArr(){
            // // 模拟ajax请求
            // setTimeout(() => {
            //     // this.$store.commit("setArr",[1,2,3,4])
            // }, 2000);
            console.log(this.$store)
            this.$store.dispatch("initArr",{ name:"vuexpage" })
        }
    },
}
</script>

<style lang="scss" scoped>
.box{
    border: 1px solid #ccc;
    padding: 20px;
}
</style>